<template>
	<view class="container">
		<TopNav title="服务设置" :bg-color="topBGC"></TopNav>
		<view class="radius-6 bg-white p-lr12">
			<view class="flex justify-between align-center p-tb12" @click="handleToPage('city')">
				<view class="flex align-center">
					<image src="/static/images/login/location.png" class="width-20 height-20" mode=""></image>
					<text class="f-s15 f-w400 text-dark line-height20 m-l8">当前服务城市</text>
				</view>
				<view class="flex align-center">
					<text class="line-height20 f-w500 f-s15 m-r4">{{serviceCity}}</text>
					<image src="/static/images/mine/dada-more.png" class="width-20 height-20" mode=""></image>
				</view>
			</view>
		</view>
		<view class="radius-6 bg-white p-lr12 m-t10">
			<view class="flex justify-between align-center p-tb12" v-for="(item,index) in cellList" :key="index"
				@click="handleToDetail(item)">
				<view class="flex align-center">
					<image :src="item.icon" class="width-20 height-20" mode=""></image>
					<text class="f-s15 f-w400 text-dark line-height20 m-l8">{{item.text}}</text>
				</view>
				<view class="flex align-center f-s12">
					<text class="text-gray" v-if="item.technician_check_status ==0">审核中</text>
					<text class="text-gray" v-else-if="item.technician_check_status == 2">审核失败</text>
					<text class=""
						v-else-if="item.technician_is_open ==1 && item.technician_check_status ==1">已开启</text>
					<text v-else class="text-gray">未开启</text>
					<image src="/static/images/mine/dada-more.png" class="width-20 height-20" mode=""></image>
				</view>
			</view>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import {
		serviceList
	} from "@/api/mine/service";
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				topBGC: 'rgba(255,255,255,0)',
				cityId: '',
				serviceCity: '-',
				cellList: []
			}
		},
		onShow() {
			this.getList()
			this.cityId = Number(this.userInfo?.city_ids) ?? ''
			if (this.cityId) {
				let cityList = this.userInfo?.website_data ?? []
				this.serviceCity = cityList.find(item => item.id == this.cityId)?.site_area_name ?? '-'
			}
		},
		onPageScroll(event) {
			let scrollTop = event.scrollTop
			// 计算透明度（0-1之间变化）
			// 这里设定当滚动超过100px时完全变为白色，你可以调整这个值
			let navbarOpacity = Math.min(scrollTop / 40, 1)
			this.topBGC = `rgba(255, 255, 255, ${navbarOpacity})`
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		methods: {
			getList() {
				serviceList().then(res => {
					let {
						data: {
							list
						}
					} = res
					this.cellList = list?.map(item => {
						return {
							id: item.id,
							text: item.name,
							icon: item.cover,
							technician_check_status: item.technician_check_status,
							technician_is_open: item.technician_is_open,
							content: {
								must_offline: item.must_offline,
								need_check: item.need_check,
								rule_desc: item.rule_desc
							}
						}
					})
				})
			},
			handleToPage() {
				this.$tab.navigateTo(`./service/city?city_name=` + this.serviceCity)
			},
			handleToDetail(select) {
				if (!this.cityId) {
					this.$toast('请设置当前服务城市')
					return
				}
				this.$tab.navigateTo(
					`./service/set?id=${select.id}&title=${select.text}&city_id=${this.cityId}&content=${encodeURIComponent(JSON.stringify(select.content))}`
				)

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx 24rpx;
	}
</style>